<!DOCTYPE html>
<html lang="en"><head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="一个基于文本语法的UML绘图工具">
        <title>nomnoml</title>
        <link rel="stylesheet" href="nomnoml_files/codemirror.css">
        <link rel="stylesheet" href="nomnoml_files/solarized.nomnoml.css">
        <link rel="stylesheet" href="nomnoml_files/nomnoml.css">
        <link rel="shortcut icon" href="">
    </head>
    <body class="">
        <div class="wrap">
            <canvas id="canvas" style="top: 70.0337px; left: 741px; width: 738px; height: 683px;" width="738" height="683"></canvas>
            <textarea id="textarea" spellcheck="false" style="display: none;"></textarea><div class="CodeMirror cm-s-solarized cm-s-light"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 26px; left: 43px;"><textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1px; height: 1em; outline: none;" autocorrect="off" autocapitalize="none" spellcheck="false" tabindex="0" wrap="off"></textarea></div><div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="width: 18px; pointer-events: none;"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="height: 18px; pointer-events: none;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1" draggable="true"><div class="CodeMirror-sizer" style="margin-left: 39px; margin-bottom: 0px; border-right-width: 50px; min-height: 558px; min-width: 430px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div style="position: relative; outline: none;" role="presentation"><div class="CodeMirror-measure"><pre class="CodeMirror-line-like"><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>22</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-cursors"><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 25px;">&nbsp;</div></div><div class="CodeMirror-code" role="presentation" style=""><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket CodeMirror-matchingbracket">[</span>Pirate<span class="cm-bracket">|</span>eyeCount<span class="cm-operator">:</span> Int<span class="cm-bracket">|</span>raid()<span class="cm-operator">;</span>pillage()<span class="cm-bracket">|</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">  [</span>beard<span class="cm-bracket">]</span><span class="cm-operator">--</span><span class="cm-bracket">[</span>parrot<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">  [</span>beard<span class="cm-bracket">]</span><span class="cm-operator">-:&gt;</span><span class="cm-bracket">[</span>foul mouth<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket CodeMirror-matchingbracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span cm-text="">​</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">[</span><span class="cm-keyword">&lt;table&gt;</span>mischief <span class="cm-bracket">|</span> bawl <span class="cm-bracket">|</span> sing <span class="cm-bracket">||</span> yell <span class="cm-bracket">|</span> drink<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">7</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span cm-text="">​</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">8</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">[</span><span class="cm-keyword">&lt;abstract&gt;</span>Marauder<span class="cm-bracket">]</span>&lt;<span class="cm-operator">:--</span><span class="cm-bracket">[</span>Pirate<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">9</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">[</span>Pirate<span class="cm-bracket">]</span><span class="cm-operator">-</span> 0..7<span class="cm-bracket">[</span>mischief<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">10</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">[</span>jollyness<span class="cm-bracket">]</span><span class="cm-operator">-&gt;</span><span class="cm-bracket">[</span>Pirate<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">11</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">[</span>jollyness<span class="cm-bracket">]</span><span class="cm-operator">-&gt;</span><span class="cm-bracket">[</span>rum<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">12</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">[</span>jollyness<span class="cm-bracket">]</span><span class="cm-operator">-&gt;</span><span class="cm-bracket">[</span>singing<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">13</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">[</span>Pirate<span class="cm-bracket">]</span><span class="cm-operator">-&gt;</span> *<span class="cm-bracket">[</span>rum<span class="cm-bracket">|</span>tastiness<span class="cm-operator">:</span> Int<span class="cm-bracket">|</span>swig()<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">14</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">[</span>Pirate<span class="cm-bracket">]</span><span class="cm-operator">-&gt;</span><span class="cm-bracket">[</span>singing<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">15</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">[</span>singing<span class="cm-bracket">]</span><span class="cm-keyword">&lt;-&gt;</span><span class="cm-bracket">[</span>rum<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">16</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span cm-text="">​</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">17</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">[</span><span class="cm-keyword">&lt;start&gt;</span>st<span class="cm-bracket">]</span><span class="cm-operator">-&gt;</span><span class="cm-bracket">[</span><span class="cm-keyword">&lt;state&gt;</span>plunder<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">18</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">[</span>plunder<span class="cm-bracket">]</span><span class="cm-operator">-&gt;</span><span class="cm-bracket">[</span><span class="cm-keyword">&lt;choice&gt;</span>more loot<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">19</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">[</span>more loot<span class="cm-bracket">]</span><span class="cm-operator">-&gt;</span><span class="cm-bracket">[</span>st<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">20</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">[</span>more loot<span class="cm-bracket">]</span> no <span class="cm-operator">-&gt;</span><span class="cm-bracket">[</span><span class="cm-keyword">&lt;end&gt;</span>e<span class="cm-bracket">]</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">21</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span cm-text="">​</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -39px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">22</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation"><span class="cm-bracket">[</span><span class="cm-keyword">&lt;actor&gt;</span>Sailor<span class="cm-bracket">]</span> <span class="cm-operator">-</span> <span class="cm-bracket">[</span><span class="cm-keyword">&lt;usecase&gt;</span>shiver me<span class="cm-operator">;</span>timbers<span class="cm-bracket">]</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent; top: 558px;"></div><div class="CodeMirror-gutters" style="height: 608px; left: 0px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 38px;"></div></div></div></div>
            <div id="linenumbers"></div>
            <div id="canvas-panner" style="width: 33%;">
                <div canvas-tools=""><div class="canvas-tools"><div class="canvas-button"><a title="Zoom in"><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M18 10h-4v-4c0-1.1-.8-2-2-2s-2 .8-2 2l.0 4h-4.0c-1.1 0-2 .8-2 2s.8 2 2 2l4.0-.0-.0 4.0c0 1.1.8 2 2 2s2-.8 2-2v-4.0l4 .0c1.1 0 2-.8 2-2s-.8-2-2-2z"></path></svg></i></a></div><div class="canvas-button"><a title="Reset zoom and panning"><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M18 7h-12c-1.1 0-2 .8-2 2s.8 2 2 2h12c1.1 0 2-.8 2-2s-.8-2-2-2zM18 14h-12c-1.1 0-2 .8-2 2s.8 2 2 2h12c1.1 0 2-.8 2-2s-.8-2-2-2z"></path></svg></i></a></div><div class="canvas-button"><a title="Zoom out"><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M18 11h-12c-1.1 0-2 .8-2 2s.8 2 2 2h12c1.1 0 2-.8 2-2s-.8-2-2-2z"></path></svg></i></a></div></div></div>
            </div>

            <div id="reference" class="sidebar">
                <div class="content">
                    <h2>Association types</h2>
                    <b>association</b> -<br>
                    <b>association</b> -&gt;<br>
                    <b>association</b> &lt;-&gt;<br>
                    <b>dependency</b> --&gt;<br>
                    <b>dependency</b> &lt;--&gt;<br>
                    <b>generalization</b> -:&gt;<br>
                    <b>implementation</b> --:&gt;<br>
                    <b>composition</b> +-<br>
                    <b>composition</b> +-&gt;<br>
                    <b>aggregation</b> o-<br>
                    <b>aggregation</b> o-&gt;<br>
                    <b>ball and socket</b> -o)<br>
                    <b>ball and socket</b> o&lt;-)<br>
                    <b>ball and socket</b> -&gt;o<br>
                    <b>note</b> --<br>
                    <b>hidden</b> -/-<br>
                    <b>weightless edge</b> _&gt;<br>
                    <b>weightless dashed</b> __<br>

                    <h2>Class diagram types</h2>
                    <pre append-nomnoml-preview="">[class]
<div><svg version="1.1" baseProfile="full" width="112.0" height="87.0" viewBox="0 0 112 87" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[class]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="87.0" width="112.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="class">
						<g fill="#eee8d5" stroke="#33322E" data-name="class">
							<rect x="0.0" y="0.0" height="31.0" width="56.0" data-name="class"></rect>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="class">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="class">
								<text x="20.0" y="13.5" stroke="none" text-anchor="middle" data-name="class">class</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div>
</pre>
<pre append-nomnoml-preview="">[&lt;abstract&gt; abstract]<div><svg version="1.1" baseProfile="full" width="134.0" height="87.0" viewBox="0 0 134 87" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;abstract&gt; abstract]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="87.0" width="134.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="abstract">
						<g fill="#eee8d5" stroke="#33322E" data-name="abstract">
							<rect x="0.0" y="0.0" height="31.0" width="78.0" data-name="abstract"></rect>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="italic" data-name="abstract">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="abstract">
								<text x="31.0" y="13.5" stroke="none" text-anchor="middle" data-name="abstract">abstract</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div>
</pre>
<pre append-nomnoml-preview="">[&lt;instance&gt; instance]<div><svg version="1.1" baseProfile="full" width="137.0" height="87.0" viewBox="0 0 137 87" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;instance&gt; instance]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="87.0" width="137.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="instance">
						<g fill="#eee8d5" stroke="#33322E" data-name="instance">
							<rect x="0.0" y="0.0" height="31.0" width="81.0" data-name="instance"></rect>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="instance">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" stroke-width="3.0" data-name="instance">
								<text x="32.5" y="13.5" stroke="none" text-anchor="middle" data-name="instance">instance</text>
								<path d="M3.5 16.0 L61.5 16.0" fill="none" data-name="instance"></path>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;reference&gt; reference]<div><svg version="1.1" baseProfile="full" width="144.0" height="87.0" viewBox="0 0 144 87" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;reference&gt; reference]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="87.0" width="144.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="reference">
						<g fill="#eee8d5" stroke="#33322E" stroke-dasharray="6 6" data-name="reference">
							<rect x="0.0" y="0.0" height="31.0" width="88.0" data-name="reference"></rect>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="reference">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="reference">
								<text x="36.0" y="13.5" stroke="none" text-anchor="middle" data-name="reference">reference</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;package&gt; package|components]<div><svg version="1.1" baseProfile="full" width="157.0" height="118.0" viewBox="0 0 157 118" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;package&gt; package|components]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="normal" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="118.0" width="157.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="package">
						<g fill="#eee8d5" stroke="#33322E" data-name="package">
							<rect x="0.0" y="31.0" height="31.0" width="101.0" data-name="package"></rect>
							<path d="M0.0 31.0 L0.0 0.0 L81.0 0.0 L81.0 31.0 Z" data-name="package"></path>
							<path d="M0.0 31.0 L101.0 31.0" fill="none" data-name="package"></path>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="package">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="package">
								<text x="0.0" y="13.5" stroke="none" data-name="package">package</text>
								
							</g>
						</g>
						<g transform="translate(0, 31)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="package">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="package">
								<text x="0.0" y="13.5" stroke="none" data-name="package">components</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;frame&gt; frame|]<div><svg version="1.1" baseProfile="full" width="130.5" height="95.0" viewBox="0 0 130.5 95" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;frame&gt; frame|]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="95.0" width="130.5" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="frame">
						<g fill="#eee8d5" stroke="#33322E" data-name="frame">
							<rect x="0.0" y="0.0" height="39.0" width="74.5" data-name="frame"></rect>
							<path d="M0.0 31.0 L51.3 31.0 L66.8 15.5 L66.8 0.0" fill="none" data-name="frame"></path>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="frame">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="frame">
								<text x="0.0" y="13.5" stroke="none" data-name="frame">frame</text>
								
							</g>
						</g>
						<g transform="translate(0, 31)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="frame">
							<g transform="translate(8, 8)" fill="#33322E" data-name="frame">
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>

				<h2>Component diagram types</h2>
				<pre append-nomnoml-preview="">[Component] - [&lt;socket&gt; socket]<div><svg version="1.1" baseProfile="full" width="162.0" height="145.0" viewBox="0 0 162 145" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[Component] - [&lt;socket&gt; socket]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="145.0" width="162.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)" fill="#33322E" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal">
					<path d="M53.0 31.0 L53 51 L53 71 L53.0 71.0 " fill="none"></path>
					<g data-name="Component">
						<g fill="#eee8d5" stroke="#33322E" data-name="Component">
							<rect x="0.0" y="0.0" height="31.0" width="106.0" data-name="Component"></rect>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Component">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Component">
								<text x="45.0" y="13.5" stroke="none" text-anchor="middle" data-name="Component">Component</text>
								
							</g>
						</g>
					</g>
					<g data-name="socket">
						<g fill="#eee8d5" stroke="#33322E" data-name="socket">
							<path d="M44.0 80.0 L44.0 79.6 L44.0 79.1 L44.1 78.7 L44.2 78.2 L44.3 77.8 L44.4 77.3 L44.5 76.9 L44.7 76.5 L44.9 76.1 L45.1 75.7 L45.3 75.3 L45.6 74.9 L45.8 74.6 L46.1 74.2 L46.4 73.9 L46.7 73.6 L47.0 73.3 L47.4 73.0 L47.7 72.7 L48.1 72.4 L48.5 72.2 L48.9 72.0 L49.3 71.8 L49.7 71.6 L50.1 71.5 L50.6 71.3 L51.0 71.2 L51.4 71.1 L51.9 71.1 L52.3 71.0 L52.8 71.0 L53.2 71.0 L53.7 71.0 L54.1 71.1 L54.6 71.1 L55.0 71.2 L55.4 71.3 L55.9 71.5 L56.3 71.6 L56.7 71.8 L57.1 72.0 L57.5 72.2 L57.9 72.4 L58.3 72.7 L58.6 73.0 L59.0 73.3 L59.3 73.6 L59.6 73.9 L59.9 74.2 L60.2 74.6 L60.4 74.9 L60.7 75.3 L60.9 75.7 L61.1 76.1 L61.3 76.5 L61.5 76.9 L61.6 77.3 L61.7 77.8 L61.8 78.2 L61.9 78.7 L62.0 79.1 L62.0 79.6 L62.0 80.0" fill="none" data-name="socket"></path>
						</g>
						<g transform="translate(57, 62)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="socket">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="socket">
								<text x="0.0" y="13.5" stroke="none" data-name="socket">socket</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;lollipop&gt; lollipop] - [Component]<div><svg version="1.1" baseProfile="full" width="162.0" height="145.0" viewBox="0 0 162 145" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;lollipop&gt; lollipop] - [Component]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="145.0" width="162.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)" fill="#33322E" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal">
					<path d="M53.0 18.0 L53 38 L53 58 L53.0 58.0 " fill="none"></path>
					<g data-name="lollipop">
						<g fill="#eee8d5" stroke="#33322E" data-name="lollipop">
							<circle r="7.2" cx="53.0" cy="9.0" data-name="lollipop"></circle>
						</g>
						<g transform="translate(57, -9)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="lollipop">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="lollipop">
								<text x="28.0" y="13.5" stroke="none" text-anchor="middle" data-name="lollipop">lollipop</text>
								
							</g>
						</g>
					</g>
					<g data-name="Component">
						<g fill="#eee8d5" stroke="#33322E" data-name="Component">
							<rect x="0.0" y="58.0" height="31.0" width="106.0" data-name="Component"></rect>
						</g>
						<g transform="translate(0, 58)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Component">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Component">
								<text x="45.0" y="13.5" stroke="none" text-anchor="middle" data-name="Component">Component</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>

				<h2>Flow chart types</h2>
				<pre append-nomnoml-preview="">[&lt;start&gt; start]<div><svg version="1.1" baseProfile="full" width="86.0" height="86.0" viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;start&gt; start]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="86.0" width="86.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="start">
						<g fill="#33322E" stroke="#33322E" data-name="start">
							<circle r="12.0" cx="15.0" cy="15.0" stroke="none" data-name="start"></circle>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;end&gt; end]<div><svg version="1.1" baseProfile="full" width="86.0" height="86.0" viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;end&gt; end]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="86.0" width="86.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="end">
						<g fill="#33322E" stroke="#33322E" data-name="end">
							<circle r="10.0" cx="15.0" cy="15.0" data-name="end"></circle>
							<circle r="6.0" cx="15.0" cy="15.0" stroke="none" data-name="end"></circle>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;state&gt; state]<div><svg version="1.1" baseProfile="full" width="109.0" height="87.0" viewBox="0 0 109 87" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;state&gt; state]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="87.0" width="109.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="state">
						<g fill="#eee8d5" stroke="#33322E" data-name="state">
							<rect x="0.0" y="0.0" rx="15.5" ry="15.5" height="31.0" width="53.0" data-name="state"></rect>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="state">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="state">
								<text x="18.5" y="13.5" stroke="none" text-anchor="middle" data-name="state">state</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;choice&gt; choice]<div><svg version="1.1" baseProfile="full" width="156.5" height="102.5" viewBox="0 0 156.5 102.5" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;choice&gt; choice]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="102.5" width="156.5" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="choice">
						<g fill="#eee8d5" stroke="#33322E" data-name="choice">
							<path d="M50.3 0.0 L100.5 23.3 L50.3 46.5 L0.0 23.3 Z" data-name="choice"></path>
						</g>
						<g transform="translate(16.75, 7.75)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="choice">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="choice">
								<text x="25.5" y="13.5" stroke="none" text-anchor="middle" data-name="choice">choice</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;sync&gt; sync]<div><svg version="1.1" baseProfile="full" width="116.0" height="65.0" viewBox="0 0 116 65" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;sync&gt; sync]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="65.0" width="116.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="sync">
						<g fill="#33322E" stroke="#33322E" data-name="sync">
							<rect x="0.0" y="0.0" height="9.0" width="60.0" data-name="sync"></rect>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;input&gt; input]<div><svg version="1.1" baseProfile="full" width="111.0" height="87.0" viewBox="0 0 111 87" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;input&gt; input]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="87.0" width="111.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="input">
						<g fill="#eee8d5" stroke="#33322E" data-name="input">
							<path d="M8.0 0.0 L55.0 0.0 L47.0 31.0 L0.0 31.0 Z" data-name="input"></path>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="input">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="input">
								<text x="19.5" y="13.5" stroke="none" text-anchor="middle" data-name="input">input</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;sender&gt; sender]<div><svg version="1.1" baseProfile="full" width="125.0" height="87.0" viewBox="0 0 125 87" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;sender&gt; sender]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="87.0" width="125.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="sender">
						<g fill="#eee8d5" stroke="#33322E" data-name="sender">
							<path d="M0.0 0.0 L61.0 0.0 L69.0 15.5 L61.0 31.0 L0.0 31.0 Z" data-name="sender"></path>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="sender">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="sender">
								<text x="0.0" y="13.5" stroke="none" data-name="sender">sender</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;receiver&gt; receiver]<div><svg version="1.1" baseProfile="full" width="133.0" height="87.0" viewBox="0 0 133 87" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;receiver&gt; receiver]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="87.0" width="133.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="receiver">
						<g fill="#eee8d5" stroke="#33322E" data-name="receiver">
							<path d="M-8.0 0.0 L77.0 0.0 L77.0 31.0 L-8.0 31.0 L0.0 15.5 Z" data-name="receiver"></path>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="receiver">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="receiver">
								<text x="0.0" y="13.5" stroke="none" data-name="receiver">receiver</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;transceiver&gt; transceiver]<div><svg version="1.1" baseProfile="full" width="157.0" height="87.0" viewBox="0 0 157 87" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;transceiver&gt; transceiver]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="87.0" width="157.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="transceiver">
						<g fill="#eee8d5" stroke="#33322E" data-name="transceiver">
							<path d="M-8.0 0.0 L93.0 0.0 L101.0 15.5 L93.0 31.0 L-8.0 31.0 L0.0 15.5 Z" data-name="transceiver"></path>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="transceiver">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="transceiver">
								<text x="0.0" y="13.5" stroke="none" data-name="transceiver">transceiver</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				
				<h2>Use case types</h2>
				<pre append-nomnoml-preview="">[&lt;actor&gt; actor]<div><svg version="1.1" baseProfile="full" width="111.0" height="111.0" viewBox="0 0 111 111" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;actor&gt; actor]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="111.0" width="111.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="actor">
						<g fill="#eee8d5" stroke="#33322E" data-name="actor">
							<circle r="4.0" cx="27.5" cy="12.0" data-name="actor"></circle>
							<path d="M27.5 16.0 L27.5 24.0" fill="none" data-name="actor"></path>
							<path d="M23.5 20.0 L31.5 20.0" fill="none" data-name="actor"></path>
							<path d="M23.5 28.0 L27.5 24.0 L31.5 28.0" fill="none" data-name="actor"></path>
						</g>
						<g transform="translate(0, 24)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="actor">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="actor">
								<text x="19.5" y="13.5" stroke="none" text-anchor="middle" data-name="actor">actor</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;usecase&gt; usecase]<div><svg version="1.1" baseProfile="full" width="156.0" height="94.8" viewBox="0 0 156 94.75" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;usecase&gt; usecase]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="94.8" width="156.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="usecase">
						<g fill="#eee8d5" stroke="#33322E" data-name="usecase">
							<ellipse cx="50.0" cy="19.4" rx="50.0" ry="19.4" data-name="usecase"></ellipse>
						</g>
						<g transform="translate(10, 3.875)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="usecase">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="usecase">
								<text x="32.0" y="13.5" stroke="none" text-anchor="middle" data-name="usecase">usecase</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				
				<h2>Miscalleneous types</h2>
				<pre append-nomnoml-preview="">[&lt;note&gt; note]<div><svg version="1.1" baseProfile="full" width="106.0" height="87.0" viewBox="0 0 106 87" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;note&gt; note]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="87.0" width="106.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="note">
						<g fill="#eee8d5" stroke="#33322E" data-name="note">
							<path d="M0.0 0.0 L42.0 0.0 L50.0 8.0 L50.0 31.0 L0.0 31.0 L0.0 0.0 Z" data-name="note"></path>
							<path d="M42.0 0.0 L42.0 8.0 L50.0 8.0" fill="none" data-name="note"></path>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="note">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="note">
								<text x="0.0" y="13.5" stroke="none" data-name="note">note</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;label&gt; label]<div><svg version="1.1" baseProfile="full" width="108.0" height="87.0" viewBox="0 0 108 87" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;label&gt; label]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="87.0" width="108.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="label">
						
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="label">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="label">
								<text x="18.0" y="13.5" stroke="none" text-anchor="middle" data-name="label">label</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;hidden&gt; hidden]<div><svg version="1.1" baseProfile="full" width="57.0" height="57.0" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;hidden&gt; hidden]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="57.0" width="57.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="hidden">
						
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;database&gt; database]<div><svg version="1.1" baseProfile="full" width="142.0" height="103.0" viewBox="0 0 142 103" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;database&gt; database]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="103.0" width="142.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="database">
						<g fill="#eee8d5" stroke="#33322E" data-name="database">
							<rect x="0.0" y="8.0" height="35.0" width="86.0" stroke="none" data-name="database"></rect>
							<path d="M0.0 8.0 L0.0 39.0" fill="none" data-name="database"></path>
							<path d="M86.0 8.0 L86.0 39.0" fill="none" data-name="database"></path>
							<ellipse cx="43.0" cy="8.0" rx="43.0" ry="6.0" data-name="database"></ellipse>
							<path d="M86.0 39.0 L85.9 39.3 L85.8 39.6 L85.5 39.9 L85.1 40.2 L84.7 40.5 L84.1 40.8 L83.4 41.1 L82.6 41.3 L81.7 41.6 L80.8 41.9 L79.7 42.1 L78.5 42.4 L77.3 42.6 L75.9 42.9 L74.5 43.1 L73.0 43.3 L71.5 43.5 L69.8 43.7 L68.1 43.9 L66.3 44.0 L64.5 44.2 L62.6 44.3 L60.7 44.5 L58.7 44.6 L56.7 44.7 L54.6 44.8 L52.6 44.8 L50.5 44.9 L48.3 45.0 L46.2 45.0 L44.1 45.0 L41.9 45.0 L39.8 45.0 L37.7 45.0 L35.5 44.9 L33.4 44.8 L31.4 44.8 L29.3 44.7 L27.3 44.6 L25.3 44.5 L23.4 44.3 L21.5 44.2 L19.7 44.0 L17.9 43.9 L16.2 43.7 L14.5 43.5 L13.0 43.3 L11.5 43.1 L10.1 42.9 L8.7 42.6 L7.5 42.4 L6.3 42.1 L5.2 41.9 L4.3 41.6 L3.4 41.3 L2.6 41.1 L1.9 40.8 L1.3 40.5 L0.9 40.2 L0.5 39.9 L0.2 39.6 L0.1 39.3 L0.0 39.0" data-name="database"></path>
						</g>
						<g transform="translate(0, 12)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="database">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="database">
								<text x="35.0" y="13.5" stroke="none" text-anchor="middle" data-name="database">database</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				<pre append-nomnoml-preview="">[&lt;table&gt; table| a | 5 || b | 7]<div><svg version="1.1" baseProfile="full" width="109.0" height="149.0" viewBox="0 0 109 149" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;table&gt; table| a | 5 || b | 7]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="normal" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="149.0" width="109.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="table">
						<g fill="#eee8d5" stroke="#33322E" data-name="table">
							<rect x="0.0" y="0.0" height="93.0" width="53.0" data-name="table"></rect>
							<path d="M0.0 31.0 L0.0 31.0" fill="none" data-name="table"></path>
							<path d="M0.0 31.0 L53.0 31.0" fill="none" data-name="table"></path>
							<path d="M0.0 62.0 L53.0 62.0" fill="none" data-name="table"></path>
							<path d="M26.5 31.0 L26.5 93.0" fill="none" data-name="table"></path>
							<path d="M53.0 31.0 L53.0 93.0" fill="none" data-name="table"></path>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="table">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="table">
								<text x="18.5" y="13.5" stroke="none" text-anchor="middle" data-name="table">table</text>
								
							</g>
						</g>
						<g transform="translate(0, 31)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="table">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="table">
								<text x="0.0" y="13.5" stroke="none" data-name="table">a</text>
								
							</g>
						</g>
						<g transform="translate(26.5, 31)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="table">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="table">
								<text x="0.0" y="13.5" stroke="none" data-name="table">5</text>
								
							</g>
						</g>
						<g transform="translate(0, 62)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="table">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="table">
								<text x="0.0" y="13.5" stroke="none" data-name="table">b</text>
								
							</g>
						</g>
						<g transform="translate(26.5, 62)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="table">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="table">
								<text x="0.0" y="13.5" stroke="none" data-name="table">7</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>

				<h2>Directives</h2>
				#import: filename<br>
				#arrowSize: 1<br>
				#bendSize: 0.3<br>
				#direction: down | right<br>
				#gutter: 5<br>
				#edgeMargin: 0<br>
				#gravity: 1<br>
				#edges: hard | rounded<br>
				#background: transparent<br>
				#fill: #eee8d5; #fdf6e3<br>
				#fillArrows: false<br>
				#font: Calibri<br>
				#fontSize: 12<br>
				#leading: 1.25<br>
				#lineWidth: 3<br>
				#padding: 8<br>
				#spacing: 40<br>
				#stroke: #33322E<br>
				#title: filename<br>
				#zoom: 1<br>
				#acyclicer: greedy<br>
				#ranker: network-simplex | tight-tree | longest-path<br>

				<h2>Custom classifier styles</h2>
				<p>A directive that starts with "." define a classifier style. The 
style is written as a space separated list of modifiers and key/value 
pairs.</p>

				<pre append-nomnoml-preview="">#.box: fill=#8f8 dashed
#.blob: visual=ellipse title=bold
[&lt;box&gt; GreenBox]
[&lt;blob&gt; Blobby]<div><svg version="1.1" baseProfile="full" width="277.8" height="94.8" viewBox="0 0 277.75 94.75" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>#.box: fill=#8f8 dashed
	#.blob: visual=ellipse title=bold
	[&lt;box&gt; GreenBox]
	[&lt;blob&gt; Blobby]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="94.8" width="277.8" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="GreenBox">
						<g fill="#8f8" stroke="#33322E" stroke-dasharray="6 6" data-name="GreenBox">
							<rect x="0.0" y="4.0" height="31.0" width="93.0" data-name="GreenBox"></rect>
						</g>
						<g transform="translate(0, 4)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="GreenBox">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="GreenBox">
								<text x="38.5" y="13.5" stroke="none" text-anchor="middle" data-name="GreenBox">GreenBox</text>
								
							</g>
						</g>
					</g>
					<g data-name="Blobby">
						<g fill="#eee8d5" stroke="#33322E" data-name="Blobby">
							<ellipse cx="177.4" cy="19.4" rx="44.4" ry="19.4" data-name="Blobby"></ellipse>
						</g>
						<g transform="translate(141.875, 3.875)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Blobby">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Blobby">
								<text x="27.5" y="13.5" stroke="none" text-anchor="middle" data-name="Blobby">Blobby</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
				
				<h3>Modifiers</h3>
				dashed<br>

				<h3>Key/value pairs</h3>
				fill=(any css color)<br><br>

				stroke=(any css color)<br><br>

				align=center<br>
				align=left<br><br>

				direction=right<br>
				direction=down<br><br>

				visual=actor<br>
				visual=class<br>
				visual=database<br>
				visual=ellipse<br>
				visual=end<br>
				visual=frame<br>
				visual=hidden<br>
				visual=input<br>
				visual=none<br>
				visual=note<br>
				visual=package<br>
				visual=receiver<br>
				visual=rhomb<br>
				visual=roundrect<br>
				visual=sender<br>
				visual=start<br>
				visual=sync<br>
				visual=table<br>
				visual=transceiver<br>

				<h3>Style title and text body</h3>
				title=left,italic,bold<br>
				body=center,italic,bold<br>
				
				<h3>Text modifiers</h3>
				bold<br>
				center<br>
				italic<br>
				left<br>
				underline<br>
			</div>

		</div>

		<div id="about" class="sidebar">
			<div class="content">
				<h2>Welcome to nomnoml</h2>
				<p>A tool for drawing UML diagrams based on a simple syntax.
				</p><p>Try and edit the code on the left and watch the diagram change. Any changes are saved to the browser's <i>localStorage</i>, so your diagram should be here the next time, (but no guarantees).</p>
				<p>Created by <a href="mailto:daniel.kallin@gmail.com">Daniel Kallin</a> and hosted on <a href="https://github.com/skanaar/nomnoml" rel="noopener" target="_blank">GitHub</a> for your perusal.</p>

				<h2>Interaction</h2>

				<p>The canvas can be panned and zoomed by dragging and scrolling in the right hand third of the canvas.
				</p>

				<img src="nomnoml_files/interaction-tutorial.svg" alt="interaction tutorial">

				<p>The editor supports a subset of <i>Sublime Text's</i> <a href="https://codemirror.net/demo/sublime.html" rel="noopener" target="_blank">keymappings</a>.
				</p>

				<h2>Usage</h2>

				<h3>Car has an Engine</h3>
				<pre append-nomnoml-preview="">[Car]-&gt;[Engine]<div><svg version="1.1" baseProfile="full" width="126.0" height="158.0" viewBox="0 0 126 158" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[Car]-&gt;[Engine]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="158.0" width="126.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)" fill="#33322E" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal">
					<path d="M35.0 31.0 L35 51 L35 64.33333333333333 L35.0 64.3 " fill="none"></path>
					<path d="M29.7 57.7 L35.0 64.3 L40.3 57.7 L35.0 71.0 Z"></path>
					<g data-name="Car">
						<g fill="#eee8d5" stroke="#33322E" data-name="Car">
							<rect x="14.0" y="0.0" height="31.0" width="43.0" data-name="Car"></rect>
						</g>
						<g transform="translate(14, 0)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Car">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Car">
								<text x="13.5" y="13.5" stroke="none" text-anchor="middle" data-name="Car">Car</text>
								
							</g>
						</g>
					</g>
					<g data-name="Engine">
						<g fill="#eee8d5" stroke="#33322E" data-name="Engine">
							<rect x="0.0" y="71.0" height="31.0" width="70.0" data-name="Engine"></rect>
						</g>
						<g transform="translate(0, 71)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Engine">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Engine">
								<text x="27.0" y="13.5" stroke="none" text-anchor="middle" data-name="Engine">Engine</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>

				<h3>Car owns an arbitrary number of blemished</h3>
				<pre append-nomnoml-preview="">[Car] +-&gt; 0..* [RustPatch]<div><svg version="1.1" baseProfile="full" width="152.0" height="158.0" viewBox="0 0 152 158" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[Car] +-&gt; 0..* [RustPatch]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="158.0" width="152.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)" fill="#33322E" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal">
					<text x="17.0" y="63.0" stroke="none">0..*</text>
					<path d="M48.0 49.7 L48 51 L48 64.33333333333333 L48.0 64.3 " fill="none"></path>
					<path d="M42.7 57.7 L48.0 64.3 L53.3 57.7 L48.0 71.0 Z"></path>
					<g fill="#33322E">
						<path d="M53.3 40.3 L48.0 49.7 L42.7 40.3 L48.0 31.0 Z"></path>
					</g>
					<g data-name="Car">
						<g fill="#eee8d5" stroke="#33322E" data-name="Car">
							<rect x="27.0" y="0.0" height="31.0" width="43.0" data-name="Car"></rect>
						</g>
						<g transform="translate(27, 0)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Car">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Car">
								<text x="13.5" y="13.5" stroke="none" text-anchor="middle" data-name="Car">Car</text>
								
							</g>
						</g>
					</g>
					<g data-name="RustPatch">
						<g fill="#eee8d5" stroke="#33322E" data-name="RustPatch">
							<rect x="0.0" y="71.0" height="31.0" width="96.0" data-name="RustPatch"></rect>
						</g>
						<g transform="translate(0, 71)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="RustPatch">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="RustPatch">
								<text x="40.0" y="13.5" stroke="none" text-anchor="middle" data-name="RustPatch">RustPatch</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>

				<h3>Car knows its Manufacturer and is the parent of Pickup</h3>
				<pre append-nomnoml-preview="">[Car]o-&gt;[Manufacturer]
[Car]&lt;:-[Pickup]<div><svg version="1.1" baseProfile="full" width="282.0" height="158.0" viewBox="0 0 282 158" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[Car]o-&gt;[Manufacturer]
	[Car]&lt;:-[Pickup]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="158.0" width="282.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)" fill="#eee8d5" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal">
					<path d="M87.0 35.8 L58.5 51 L58.5 64.33333333333333 L58.5 64.3 " fill="none"></path>
					<path d="M53.2 57.7 L58.5 64.3 L63.8 57.7 L58.5 71.0 Z"></path>
					<g fill="#eee8d5">
						<path d="M97.8 36.1 L87.0 35.8 L92.8 26.7 L103.5 27.0 Z"></path>
					</g>
					<path d="M158.3 33.3 L191.5 51 L191.5 71 L191.5 71.0 " fill="none"></path>
					<path d="M160.8 28.6 L158.3 33.3 L155.8 38.0 L146.5 27.0 Z"></path>
					<g data-name="Car">
						<g fill="#eee8d5" stroke="#33322E" data-name="Car">
							<rect x="104.0" y="0.0" height="31.0" width="43.0" data-name="Car"></rect>
						</g>
						<g transform="translate(104, 0)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Car">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Car">
								<text x="13.5" y="13.5" stroke="none" text-anchor="middle" data-name="Car">Car</text>
								
							</g>
						</g>
					</g>
					<g data-name="Manufacturer">
						<g fill="#eee8d5" stroke="#33322E" data-name="Manufacturer">
							<rect x="0.0" y="71.0" height="31.0" width="117.0" data-name="Manufacturer"></rect>
						</g>
						<g transform="translate(0, 71)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Manufacturer">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Manufacturer">
								<text x="50.5" y="13.5" stroke="none" text-anchor="middle" data-name="Manufacturer">Manufacturer</text>
								
							</g>
						</g>
					</g>
					<g data-name="Pickup">
						<g fill="#eee8d5" stroke="#33322E" data-name="Pickup">
							<rect x="157.0" y="71.0" height="31.0" width="69.0" data-name="Pickup"></rect>
						</g>
						<g transform="translate(157, 71)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Pickup">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Pickup">
								<text x="26.5" y="13.5" stroke="none" text-anchor="middle" data-name="Pickup">Pickup</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>

				<h3>Car has some attributes</h3>
				<pre append-nomnoml-preview="">[Car|speed: Number;valves: Valve\[\] ]<div><svg version="1.1" baseProfile="full" width="179.0" height="133.0" viewBox="0 0 179 133" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[Car|speed: Number;valves: Valve\[\] ]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="normal" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="133.0" width="179.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="Car">
						<g fill="#eee8d5" stroke="#33322E" data-name="Car">
							<rect x="0.0" y="0.0" height="77.0" width="123.0" data-name="Car"></rect>
							<path d="M0.0 31.0 L123.0 31.0" fill="none" data-name="Car"></path>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Car">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Car">
								<text x="53.5" y="13.5" stroke="none" text-anchor="middle" data-name="Car">Car</text>
								
							</g>
						</g>
						<g transform="translate(0, 31)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="Car">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="Car">
								<text x="0.0" y="13.5" stroke="none" data-name="Car">speed: Number</text>
								<text x="0.0" y="28.5" stroke="none" data-name="Car">valves: Valve[]</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>

				<h3>Engine has an operation</h3>
				<pre append-nomnoml-preview="">[Engine||start()]<div><svg version="1.1" baseProfile="full" width="126.0" height="126.0" viewBox="0 0 126 126" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[Engine||start()]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="normal" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="126.0" width="126.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="Engine">
						<g fill="#eee8d5" stroke="#33322E" data-name="Engine">
							<rect x="0.0" y="0.0" height="70.0" width="70.0" data-name="Engine"></rect>
							<path d="M0.0 31.0 L70.0 31.0" fill="none" data-name="Engine"></path>
							<path d="M0.0 39.0 L70.0 39.0" fill="none" data-name="Engine"></path>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Engine">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Engine">
								<text x="27.0" y="13.5" stroke="none" text-anchor="middle" data-name="Engine">Engine</text>
								
							</g>
						</g>
						<g transform="translate(0, 31)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="Engine">
							<g transform="translate(8, 8)" fill="#33322E" data-name="Engine">
								
							</g>
						</g>
						<g transform="translate(0, 39)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="Engine">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="Engine">
								<text x="0.0" y="13.5" stroke="none" data-name="Engine">start()</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>

				<h3>Engine has internal parts</h3>
				<pre append-nomnoml-preview="">[Engine|
  [Cylinder]-&gt;1[Piston]
  [Cylinder]-&gt;2[Valve]
]<div><svg version="1.1" baseProfile="full" width="274.0" height="245.0" viewBox="0 0 274 245" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[Engine|
	  [Cylinder]-&gt;1[Piston]
	  [Cylinder]-&gt;2[Valve]
	]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="245.0" width="274.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="Engine">
						<g fill="#eee8d5" stroke="#33322E" data-name="Engine">
							<rect x="0.0" y="0.0" height="189.0" width="218.0" data-name="Engine"></rect>
							<path d="M0.0 31.0 L218.0 31.0" fill="none" data-name="Engine"></path>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Engine">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Engine">
								<text x="101.0" y="13.5" stroke="none" text-anchor="middle" data-name="Engine">Engine</text>
								
							</g>
						</g>
						<g transform="translate(0, 31)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="Engine">
							<g transform="translate(8, 8)" fill="#33322E" data-name="Engine">
								<g transform="translate(20, 20)" fill="#33322E" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="Engine">
									<text x="15.5" y="63.0" stroke="none" data-name="Engine">1</text>
									<path d="M61.0 31.0 L32.5 51 L32.5 64.33333333333333 L32.5 64.3 " fill="none" data-name="Engine"></path>
									<path d="M27.2 57.7 L32.5 64.3 L37.8 57.7 L32.5 71.0 Z" data-name="Engine"></path>
									<text x="141.5" y="63.0" stroke="none" data-name="Engine">2</text>
									<path d="M105.0 31.0 L133.5 51 L133.5 64.33333333333333 L133.5 64.3 " fill="none" data-name="Engine"></path>
									<path d="M128.2 57.7 L133.5 64.3 L138.8 57.7 L133.5 71.0 Z" data-name="Engine"></path>
									<g data-name="Cylinder">
										<g fill="#fdf6e3" stroke="#33322E" data-name="Cylinder">
											<rect x="43.0" y="0.0" height="31.0" width="80.0" data-name="Cylinder"></rect>
										</g>
										<g transform="translate(43, 0)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Cylinder">
											<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Cylinder">
												<text x="32.0" y="13.5" stroke="none" text-anchor="middle" data-name="Cylinder">Cylinder</text>
												
											</g>
										</g>
									</g>
									<g data-name="Piston">
										<g fill="#fdf6e3" stroke="#33322E" data-name="Piston">
											<rect x="0.0" y="71.0" height="31.0" width="65.0" data-name="Piston"></rect>
										</g>
										<g transform="translate(0, 71)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Piston">
											<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Piston">
												<text x="24.5" y="13.5" stroke="none" text-anchor="middle" data-name="Piston">Piston</text>
												
											</g>
										</g>
									</g>
									<g data-name="Valve">
										<g fill="#fdf6e3" stroke="#33322E" data-name="Valve">
											<rect x="105.0" y="71.0" height="31.0" width="57.0" data-name="Valve"></rect>
										</g>
										<g transform="translate(105, 71)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Valve">
											<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Valve">
												<text x="20.5" y="13.5" stroke="none" text-anchor="middle" data-name="Valve">Valve</text>
												
											</g>
										</g>
									</g>
								</g>
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>

				<h3>Engine depends on components</h3>
				<pre append-nomnoml-preview="">[Engine] - [&lt;socket&gt;Tank]
[Tank] --&gt;o [Big Fuel Tank]
				<div><svg version="1.1" baseProfile="full" width="176.0" height="216.0" viewBox="0 0 176 216" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[Engine] - [&lt;socket&gt;Tank]
	[Tank] --&gt;o [Big Fuel Tank]
					</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="216.0" width="176.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)" fill="#eee8d5" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal">
					<path d="M60.0 31.0 L60 51 L60 71 L60.0 71.0 " fill="none"></path>
					<g stroke-dasharray="6 6">
						<path d="M60.0 89.0 L60 109 L60 109 L60.0 109.0 " fill="none"></path>
					</g>
					<path d="M56.0 105.7 L60.0 105.7 L64.0 105.7 L60.0 115.7 Z"></path>
					<path d="M60.0 118.3 L60.0 129.0" fill="none"></path>
					<ellipse cx="60.0" cy="118.3" rx="4.0" ry="4.0"></ellipse>
					<g data-name="Engine">
						<g fill="#eee8d5" stroke="#33322E" data-name="Engine">
							<rect x="25.0" y="0.0" height="31.0" width="70.0" data-name="Engine"></rect>
						</g>
						<g transform="translate(25, 0)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Engine">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Engine">
								<text x="27.0" y="13.5" stroke="none" text-anchor="middle" data-name="Engine">Engine</text>
								
							</g>
						</g>
					</g>
					<g data-name="Tank">
						<g fill="#eee8d5" stroke="#33322E" data-name="Tank">
							<path d="M51.0 80.0 L51.0 79.6 L51.0 79.1 L51.1 78.7 L51.2 78.2 L51.3 77.8 L51.4 77.3 L51.5 76.9 L51.7 76.5 L51.9 76.1 L52.1 75.7 L52.3 75.3 L52.6 74.9 L52.8 74.6 L53.1 74.2 L53.4 73.9 L53.7 73.6 L54.0 73.3 L54.4 73.0 L54.7 72.7 L55.1 72.4 L55.5 72.2 L55.9 72.0 L56.3 71.8 L56.7 71.6 L57.1 71.5 L57.6 71.3 L58.0 71.2 L58.4 71.1 L58.9 71.1 L59.3 71.0 L59.8 71.0 L60.2 71.0 L60.7 71.0 L61.1 71.1 L61.6 71.1 L62.0 71.2 L62.4 71.3 L62.9 71.5 L63.3 71.6 L63.7 71.8 L64.1 72.0 L64.5 72.2 L64.9 72.4 L65.3 72.7 L65.6 73.0 L66.0 73.3 L66.3 73.6 L66.6 73.9 L66.9 74.2 L67.2 74.6 L67.4 74.9 L67.7 75.3 L67.9 75.7 L68.1 76.1 L68.3 76.5 L68.5 76.9 L68.6 77.3 L68.7 77.8 L68.8 78.2 L68.9 78.7 L69.0 79.1 L69.0 79.6 L69.0 80.0" fill="none" data-name="Tank"></path>
						</g>
						<g transform="translate(64, 62)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="Tank">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="Tank">
								<text x="0.0" y="13.5" stroke="none" data-name="Tank">Tank</text>
								
							</g>
						</g>
					</g>
					<g data-name="Big Fuel Tank">
						<g fill="#eee8d5" stroke="#33322E" data-name="Big Fuel Tank">
							<rect x="0.0" y="129.0" height="31.0" width="120.0" data-name="Big Fuel Tank"></rect>
						</g>
						<g transform="translate(0, 129)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Big Fuel Tank">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Big Fuel Tank">
								<text x="52.0" y="13.5" stroke="none" text-anchor="middle" data-name="Big Fuel Tank">Big Fuel Tank</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>

				<h3>Set font</h3>
				<pre append-nomnoml-preview="">#font: Times
Text with serifs
				<div><svg version="1.1" baseProfile="full" width="118.0" height="31.0" viewBox="0 0 118 31" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>#font: Times
	Text with serifs
					</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Times" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Times" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="31.0" width="118.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E" text-align="left">
				<text x="0.0" y="13.5" stroke="none">Text with serifs</text>
				
			</g>
		</g>
	</g>
</svg></div></pre>

				<h3>Layout the diagram really tight</h3>
				<pre append-nomnoml-preview="">#fontSize: 8
#spacing: 12
#padding: 3
[Lorem ipsum]-[dolor sit amet]<div><svg version="1.1" baseProfile="full" width="129.0" height="90.0" viewBox="0 0 129 90" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>#fontSize: 8
	#spacing: 12
	#padding: 3
	[Lorem ipsum]-[dolor sit amet]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="8pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="8pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="90.0" width="129.0" stroke="none"></rect>
			</g>
			<g transform="translate(3, 3)" fill="#33322E">
				<g transform="translate(20, 20)" fill="#33322E" font-family="Helvetica" font-size="8pt" font-weight="normal" font-style="normal">
					<path d="M41.5 16.0 L41.5 22 L41.5 28 L41.5 28.0 " fill="none"></path>
					<g data-name="Lorem ipsum">
						<g fill="#eee8d5" stroke="#33322E" data-name="Lorem ipsum">
							<rect x="1.0" y="0.0" height="16.0" width="81.0" data-name="Lorem ipsum"></rect>
						</g>
						<g transform="translate(1, 0)" font-family="Helvetica" font-size="8pt" font-weight="bold" font-style="normal" data-name="Lorem ipsum">
							<g transform="translate(3, 3)" fill="#33322E" text-align="center" data-name="Lorem ipsum">
								<text x="37.5" y="9.0" stroke="none" text-anchor="middle" data-name="Lorem ipsum">Lorem ipsum</text>
								
							</g>
						</g>
					</g>
					<g data-name="dolor sit amet">
						<g fill="#eee8d5" stroke="#33322E" data-name="dolor sit amet">
							<rect x="0.0" y="28.0" height="16.0" width="83.0" data-name="dolor sit amet"></rect>
						</g>
						<g transform="translate(0, 28)" font-family="Helvetica" font-size="8pt" font-weight="bold" font-style="normal" data-name="dolor sit amet">
							<g transform="translate(3, 3)" fill="#33322E" text-align="center" data-name="dolor sit amet">
								<text x="38.5" y="9.0" stroke="none" text-anchor="middle" data-name="dolor sit amet">dolor sit amet</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>

				<h3>Tables</h3>
				<pre append-nomnoml-preview="">[&lt;table&gt;Fruits|
  Apples  | 17   ||
  Oranges | 4711
]<div><svg version="1.1" baseProfile="full" width="208.0" height="149.0" viewBox="0 0 208 149" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>[&lt;table&gt;Fruits|
	  Apples  | 17   ||
	  Oranges | 4711
	]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="normal" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="149.0" width="208.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="Fruits">
						<g fill="#eee8d5" stroke="#33322E" data-name="Fruits">
							<rect x="0.0" y="0.0" height="93.0" width="152.0" data-name="Fruits"></rect>
							<path d="M0.0 31.0 L0.0 31.0" fill="none" data-name="Fruits"></path>
							<path d="M0.0 31.0 L152.0 31.0" fill="none" data-name="Fruits"></path>
							<path d="M0.0 62.0 L152.0 62.0" fill="none" data-name="Fruits"></path>
							<path d="M76.0 31.0 L76.0 93.0" fill="none" data-name="Fruits"></path>
							<path d="M152.0 31.0 L152.0 93.0" fill="none" data-name="Fruits"></path>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" data-name="Fruits">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Fruits">
								<text x="68.0" y="13.5" stroke="none" text-anchor="middle" data-name="Fruits">Fruits</text>
								
							</g>
						</g>
						<g transform="translate(0, 31)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="Fruits">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="Fruits">
								<text x="0.0" y="13.5" stroke="none" data-name="Fruits">Apples</text>
								
							</g>
						</g>
						<g transform="translate(76, 31)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="Fruits">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="Fruits">
								<text x="0.0" y="13.5" stroke="none" data-name="Fruits">17</text>
								
							</g>
						</g>
						<g transform="translate(0, 62)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="Fruits">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="Fruits">
								<text x="0.0" y="13.5" stroke="none" data-name="Fruits">Oranges</text>
								
							</g>
						</g>
						<g transform="translate(76, 62)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="Fruits">
							<g transform="translate(8, 8)" fill="#33322E" text-align="left" data-name="Fruits">
								<text x="0.0" y="13.5" stroke="none" data-name="Fruits">4711</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>

				<h3>Create your own styles</h3>
				<pre append-nomnoml-preview="">#.box: fill=#8f8 dashed
[&lt;box&gt; GreenBox]<div><svg version="1.1" baseProfile="full" width="149.0" height="87.0" viewBox="0 0 149 87" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>#.box: fill=#8f8 dashed
	[&lt;box&gt; GreenBox]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="87.0" width="149.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="GreenBox">
						<g fill="#8f8" stroke="#33322E" stroke-dasharray="6 6" data-name="GreenBox">
							<rect x="0.0" y="0.0" height="31.0" width="93.0" data-name="GreenBox"></rect>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="GreenBox">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="GreenBox">
								<text x="38.5" y="13.5" stroke="none" text-anchor="middle" data-name="GreenBox">GreenBox</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>

				<h3>Divide into multiple files</h3>
				<pre publish-as-file="blobby_styles">#.blob: fill=pink</pre>
                    <pre append-nomnoml-preview="">#import: blobby_styles
[&lt;blob&gt; Blobby]<div><svg version="1.1" baseProfile="full" width="127.0" height="87.0" viewBox="0 0 127 87" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<desc>#.blob: fill=pink
	[&lt;blob&gt; Blobby]</desc>
	<g stroke-width="1.0" text-align="left" font="12pt Helvetica, Arial, sans-serif" font-size="12pt" font-family="Helvetica" font-weight="bold" font-style="normal">
		<g transform="translate(0.5, 0.5)" font-family="Helvetica" font-size="12pt" font-weight="bold" font-style="normal" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="round" stroke="#33322E">
			<g stroke="transparent" fill="transparent">
				<rect x="0.0" y="0.0" height="87.0" width="127.0" stroke="none"></rect>
			</g>
			<g transform="translate(8, 8)" fill="#33322E">
				<g transform="translate(20, 20)">
					<g data-name="Blobby">
						<g fill="pink" stroke="#33322E" data-name="Blobby">
							<rect x="0.0" y="0.0" height="31.0" width="71.0" data-name="Blobby"></rect>
						</g>
						<g transform="translate(0, 0)" font-family="Helvetica" font-size="12pt" font-weight="normal" font-style="normal" data-name="Blobby">
							<g transform="translate(8, 8)" fill="#33322E" text-align="center" data-name="Blobby">
								<text x="27.5" y="13.5" stroke="none" text-anchor="middle" data-name="Blobby">Blobby</text>
								
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg></div></pre>
			</div>
		</div>

		<div id="export" class="sidebar">
			<div class="content" export-menu=""><div class="file-menu"><h2>Downloads</h2><a class="btn" href="https://www.nomnoml.com/"><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M19 20h-14c-1.6 0-3-1.3-3-3v-8c0-1.6 1.3-3 3-3h1.5l1-1c.5-.5 1.5-1 2.4-1h4c.8 0 1.8.4 2.4 1l1 1h1.5c1.6 0 3 1.3 3 3v8c0 1.6-1.3 3-3 3zm-14-12c-.5 0-1 .4-1 1v8c0 .5.4 1 1 1h14c.5 0 1-.4 1-1v-8c0-.5-.4-1-1-1h-2c-.2 0-.52-.1-.7-.2l-1.2-1.2c-.2-.2-.7-.4-1-.4h-4c-.2 0-.7.2-1 .4l-1.2 1.2c-.1.1-.4.2-.7.2h-2zM12 10c1.3 0 2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5-2.5-1.1-2.5-2.5 1.1-2.5 2.5-2.5m0-1c-1.9 0-3.5 1.5-3.5 3.5 0 1.9 1.5 3.5 3.5 3.5s3.5-1.5 3.5-3.5c0-1.9-1.5-3.5-3.5-3.5zM18 8.6c-.7 0-1.3.5-1.3 1.3s.5 1.2 1.3 1.2 1.3-.58 1.3-1.2-.5-1.3-1.3-1.3z"></path></svg></i>PNG image</a><p>Downloaded image files will be given the filename in the <tt>#title</tt> directive</p><a class="btn" href="https://www.nomnoml.com/"><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M8.5 7.9c.8 0 1.5.6 1.5 1.5s-.6 1.5-1.5 1.5-1.5-.6-1.5-1.5.6-1.5 1.5-1.5m0-1c-1.3 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.1-2.5-2.5-2.5zM16 11.9c.45.0 1.27 1.8 1.7 4.0h-11.3c.4-1.0 1.0-2.0 1.6-2.0.8 0 1.1.1 1.53.42.4.2 1.0.58 1.97.58 1.1 0 1.9-.8 2.6-1.6.6-.6 1.2-1.3 1.8-1.3m0-1c-2 0-3 3-4.5 3s-1.4-1-3.5-1c-2 0-3.0 4-3.0 4h14.0s-1-6-3-6zM22 6c0-1.1-.8-2-2-2h-16c-1.1 0-2 .8-2 2v12c0 1.1.8 2 2 2h16c1.1 0 2-.8 2-2v-12zm-2 12h-16v-12h16.0l-.0 12z"></path></svg></i>SVG with source</a><p>Downloaded SVG files will have the source code embedded. Open an exported SVG file to load it's nomnoml source.</p><a class="btn" href="https://www.nomnoml.com/"><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M20.9 17c0-.1-.0-.2-.0-.3l-2-6c-.1-.4-.5-.6-.9-.6h-.5l.6-.6c1.17-1.17 1.17-3.0 0-4.2-.81-.8-2.0-1.0-3.1-.7v-1.3c0-1.6-1.3-3-3-3s-3 1.3-3 3v1.3c-1.0-.3-2.3-.1-3.1.7-1.17 1.17-1.17 3.0.0 4.2l.68.6h-.5c-.4 0-.8.2-.9.6l-2 6c-.0.1-.0.2-.0.3-.0 0-.0 5-.0 5 0 .5.4 1 1 1h16c.5 0 1-.4 1-1 0 0 0-5-.0-5zm-13.6-10.5c.1-.1.4-.2.7-.2s.5.1.7.2l2.2 2.2v-5.7c0-.5.4-1 1-1s1 .4 1 1v5.7l2.2-2.2c.3-.3 1.0-.3 1.4 0 .3.39.3 1.0.0 1.4l-4.7 4.6-4.7-4.6c-.3-.3-.3-1.0 0-1.4zm-.5 5.5h1.8l3.4 3.41 3.4-3.41h1.8l1.6 5h-13.8l1.6-5zm12.2 9h-14v-3h14v3z"></path></svg></i>Source code</a></div></div>
		</div>

		<div id="files" class="sidebar">
			<div class="content" file-menu=""><div class="file-menu"><label class="btn"><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M8.5 7.9c.8 0 1.5.6 1.5 1.5s-.6 1.5-1.5 1.5-1.5-.6-1.5-1.5.6-1.5 1.5-1.5m0-1c-1.3 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.1-2.5-2.5-2.5zM16 11.9c.45.0 1.27 1.8 1.7 4.0h-11.3c.4-1.0 1.0-2.0 1.6-2.0.8 0 1.1.1 1.53.42.4.2 1.0.58 1.97.58 1.1 0 1.9-.8 2.6-1.6.6-.6 1.2-1.3 1.8-1.3m0-1c-2 0-3 3-4.5 3s-1.4-1-3.5-1c-2 0-3.0 4-3.0 4h14.0s-1-6-3-6zM22 6c0-1.1-.8-2-2-2h-16c-1.1 0-2 .8-2 2v12c0 1.1.8 2 2 2h16c1.1 0 2-.8 2-2v-12zm-2 12h-16v-12h16.0l-.0 12z"></path></svg></i>Open SVG with source...<input type="file" accept="image/svg+xml"></label><a class="btn" href="https://www.nomnoml.com/"><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 4.5l-4.7 4.7c-.3.3-.3 1.0 0 1.4s1.0.3 1.4 0l2.2-2.2v7.5c0 .5.4 1 1 1s1-.4 1-1v-7.5l2.2 2.2c.1.1.4.2.7.2s.5-.0.7-.2c.3-.3.3-1.0 0-1.4l-4.7-4.7z M19 18c.55 0 1 .45 1 1s-.45 1-1 1h-14c-.55 0-1-.45-1-1s.45-1 1-1h14m0-2h-14c-1.6 0-3 1.3-3 3s1.3 3 3 3h14c1.6 0 3-1.3 3-3s-1.3-3-3-3z"></path></svg></i>Export .zip archive...</a><label class="btn"><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M16.7 10.2c-.3-.3-1.0-.3-1.4 0l-2.2 2.2v-7.5c0-.5-.4-1-1-1s-1 .4-1 1v7.5l-2.2-2.2c-.3-.3-1.0-.3-1.4 0s-.3 1.0 0 1.4l4.7 4.7 4.7-4.7c.3-.3.3-1.0 0-1.4z  M19 18c.55 0 1 .45 1 1s-.45 1-1 1h-14c-.55 0-1-.45-1-1s.45-1 1-1h14m0-2h-14c-1.6 0-3 1.3-3 3s1.3 3 3 3h14c1.6 0 3-1.3 3-3s-1.3-3-3-3z"></path></svg></i>Import .zip archive...<input type="file" accept="application/zip"></label><a class="btn" href="https://www.nomnoml.com/"><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M15 12h-2v-2c0-.5-.4-1-1-1s-1 .4-1 1v2h-2c-.5 0-1 .4-1 1s.4 1 1 1h2v2c0 .5.4 1 1 1s1-.4 1-1v-2h2c.5 0 1-.4 1-1s-.4-1-1-1zM19.7 7.2l-4-4c-.1-.1-.4-.2-.7-.2h-8c-1.6 0-3 1.3-3 3v12c0 1.6 1.3 3 3 3h10c1.6 0 3-1.3 3-3v-10c0-.2-.1-.52-.2-.7zm-2.1.7h-1.0c-.8 0-1.5-.6-1.5-1.5v-1.0l2.5 2.5zm-.5 11h-10c-.5 0-1-.4-1-1v-12c0-.5.4-1 1-1h7v1.5c0 1.3 1.1 2.5 2.5 2.5h1.5v9c0 .5-.4 1-1 1z"></path></svg></i>Save to local file...</a><h2>Local files</h2><div class="file-entry active"><a href="#"><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M22.2 10.4c-3.39-2.8-9.5-8.1-9.6-8.2l-.6-.5-.6.5c-.0.0-6.2 5.3-9.66 8.2-.4.3-.6.9-.6 1.5 0 1.1.8 2 2 2h1v6c0 1.1.8 2 2 2h12c1.1 0 2-.8 2-2v-6h1c1.1 0 2-.8 2-2 0-.5-.2-1.1-.7-1.5zm-8.2 9.5h-4v-5h4v5zm4-8l.0 8h-3.0v-6h-6v6h-3v-8h-3.0c2.7-2.3 7.3-6.2 9.0-7.68 1.6 1.4 6.2 5.3 9 7.6l-3-.0z"></path></svg></i>Home</a></div><h2>&nbsp;</h2><p>Import files with <code>#import: file</code></p><p>Create folders with <code>/</code> in filename</p></div></div>
		</div>

		<div id="linemarker" style="top: -30px;"></div>

		<div menu=""><div class="tools"><a class="logo"><h1>nomnoml </h1></a><a><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M14.2 16.0l.5-1.1c.8-1.61.8-3.2.2-4.5-.1-.2-.2-.4-.4-.6 1.4-.6 2.4-2.0 2.4-3.6 0-2.2-1.7-4-4-4s-4 1.7-4 4c0 .7.2 1.5.6 2.1-1.6.33-2.8 1.2-2.9 1.3-.7.6-.8 1.68-.4 2.5.3.5.8.9 1.4.98l-.5 1.1c-.8 1.61-.8 3.2-.2 4.5.5 1.1 1.6 1.9 2.9 2.2.4.0.8.1 1.2.1 2.3 0 3.9-1.3 4.14-1.5.7-.63.8-1.6.4-2.5-.3-.5-.8-.9-1.4-.98zm-1.2-12.0c1.1 0 2 .8 2 2s-.8 2-2 2c-1.1 0-2-.8-2-2s.8-2 2-2zm-1.8 14.9c-.2 0-.5-.0-.8-.0-1.6-.3-2.3-1.9-1.3-3.9l1-1.9c.5-.9.47-1.63-.1-2.0-.1-.1-.4-.1-.6-.1-.5 0-1.2.2-1.2.2s1.1-1.0 2.8-1.0c.2 0 .56.0.8.0 1.64.3 2.3 1.9 1.3 3.9l-1 1.9c-.5.9-.4 1.6.1 2.0.1.1.4.1.6.1.5 0 1.2-.2 1.2-.2s-1.1 1.0-2.8 1.0z"></path></svg></i></a><a><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17 21h-10c-1.6 0-3-1.3-3-3v-12c0-1.6 1.3-3 3-3h10c1.6 0 3 1.3 3 3v12c0 1.6-1.3 3-3 3zm-10-16c-.5 0-1 .4-1 1v12c0 .5.4 1 1 1h10c.5 0 1-.4 1-1v-12c0-.5-.4-1-1-1h-10zM16 11h-8c-.2 0-.5-.2-.5-.5s.2-.5.5-.5h8c.2 0 .5.2.5.5s-.2.5-.5.5zM16 8h-8c-.2 0-.5-.2-.5-.5s.2-.5.5-.5h8c.2 0 .5.2.5.5s-.2.5-.5.5zM16 14h-8c-.2 0-.5-.2-.5-.5s.2-.5.5-.5h8c.2 0 .5.2.5.5s-.2.5-.5.5zM16 17h-8c-.2 0-.5-.2-.5-.5s.2-.5.5-.5h8c.2 0 .5.2.5.5s-.2.5-.5.5z"></path></svg></i></a><a><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 21.3l-7.1-7.1c-1.17-1.17-1.17-3.0 0-4.2 1.0-1.0 2.9-1.1 4.1-.1v-4.8c0-1.6 1.3-3 3-3s3 1.3 3 3v4.8c1.1-1.0 3.0-.9 4.1.1 1.17 1.1 1.17 3.0 0 4.2l-7.1 7.1zm-5-10.2c-.2 0-.5.1-.7.2-.3.39-.3 1.0 0 1.4l5.7 5.7 5.7-5.7c.3-.3.3-1.0 0-1.4-.3-.3-1.0-.3-1.4 0l-3.2 3.2v-9.6c0-.5-.4-1-1-1s-1 .4-1 1v9.6l-3.2-3.2c-.1-.1-.4-.2-.7-.2z"></path></svg></i></a><a><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M22.3 8h-2.4c-.4-1.2-1.5-2-2.8-2h-6c0-1.1-.9-2-2-2h-4.1c-1.7 0-3 1.3-3 3v10c0 1.7 1.3 3 3 3h12c1.7 0 3.4-1.3 3.8-3l2.2-8c.1-.6-.2-1-.7-1zm-18.3 1v-2c0-.6.4-1 1-1h4c0 1.1.9 2 2 2h6c.6 0 1 .4 1 1h-11.1c-.6 0-1.1.4-1.3 1l-1.6 6.3v-7.3zm14.9 7.5c-.2.8-1.1 1.5-1.9 1.5h-12s-.4-.2-.2-.8l1.9-7c0-.1.2-.2.3-.2h13.7l-1.8 6.5z"></path></svg></i></a><a><i class="icon"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M18 7h-1v-1c0-1.1-.8-2-2-2h-7c-1.1 0-2 .8-2 2v1h-1c-.5 0-1 .4-1 1s.4 1 1 1v8c0 2.2 1.7 4 4 4h5c2.2 0 4-1.7 4-4v-8c.5 0 1-.4 1-1s-.4-1-1-1zm-10-1h7v1h-7v-1zm8 11c0 1.1-.8 2-2 2h-5c-1.1 0-2-.8-2-2v-8h9v8zM8.5 10.5c-.2 0-.5.2-.5.5v6c0 .2.2.5.5.5s.5-.2.5-.5v-6c0-.2-.2-.5-.5-.5zM10.5 10.5c-.2 0-.5.2-.5.5v6c0 .2.2.5.5.5s.5-.2.5-.5v-6c0-.2-.2-.5-.5-.5zM12.5 10.5c-.2 0-.5.2-.5.5v6c0 .2.2.5.5.5s.5-.2.5-.5v-6c0-.2-.2-.5-.5-.5zM14.5 10.5c-.2 0-.5.2-.5.5v6c0 .2.2.5.5.5s.5-.2.5-.5v-6c0-.2-.2-.5-.5-.5z"></path></svg></i></a><div id="tooltip"></div><div class="system-banners"></div><div class="terminal-banners"></div></div></div>
	</div>
	
	<div class="alert-list" daily-tip="">
	</div>
	<script type="text/vnd.nomnoml.class" id="defaultGraph">[Pirate|eyeCount: Int|raid();pillage()|
  [beard]--[parrot]
  [beard]-:>[foul mouth]
]

[<table>mischief | bawl | sing || yell | drink]

[<abstract>Marauder]<:--[Pirate]
[Pirate]- 0..7[mischief]
[jollyness]->[Pirate]
[jollyness]->[rum]
[jollyness]->[singing]
[Pirate]-> *[rum|tastiness: Int|swig()]
[Pirate]->[singing]
[singing]<->[rum]

[<start>st]->[<state>plunder]
[plunder]->[<choice>more loot]
[more loot]->[st]
[more loot] no ->[<end>e]

[<actor>Sailor] - [<usecase>shiver me;timbers]</script>

	<script src="nomnoml_files/codemirror-compressed.js"></script>
	<script src="nomnoml_files/nomnoml.codemirror-mode.js"></script>

	<script src="nomnoml_files/react.production.min.js"></script>
	<script src="nomnoml_files/react-dom.production.min.js"></script>
	<script src="nomnoml_files/jszip.min.js"></script>
	<script src="nomnoml_files/webapp.js"></script>
	
	<script>
            WebApp.bootstrap(CodeMirror)
        </script>
	
	<script src="nomnoml_files/additionals.js"></script>



</body></html>